<template>
	<view class="container" :style="appThemeStyle">

		<view class="container_item ">
			<view class="container_item_top">
				<text style="color: #999;">{{list.orderDateTime}}</text>
				<text class="status">{{list.status}}</text>
			</view>
			<view class="goods-image" v-for="(item,index) in list.goods">
				<image class="goods-img" :src="item.goods_img" mode=""></image>
				<view class="goods-image-intro">
					<view class="goods-image-intro-top">
						<text>{{item.goods_name}}</text>
						<text style="color: #999;">￥{{item.goods_price}}</text>
					</view>
					<view style="margin: 10rpx 0;" class="goods-image-intro-top">
						<text>商品规格：{{item.goods_number}}件</text>
					</view>

				</view>
			</view>
			<!-- 	<view class="goods-image-intro-top" style="color: var(--main-bg);">
				<text>共{{i.goods.length}}件商品，总金额￥{{i.total_price}}</text>
			</view> -->
			<template>
				<view class="container_bottom">
					<view class="address">
						<p>{{list.contactName}} {{list.contactTel}}</p>
						<p style="margin-top: 10rpx;">{{list.contactAddress}}</p>
					</view>
					<view class="send" @click="showpop(list)" v-if="list.status!='已完成'">
						配送
					</view>
					<view class="send" @click="pay(list)" v-if="list.status=='配送中'">
						收款
					</view>
					<!-- <view class="send"   v-if="i.state_text=='配送中'" >
  					配送中
  				</view> -->
					<!-- <view class="send"   v-if="i.state_text=='已完成'" >
  					配送完成
  				</view> -->
				</view>
			</template>
			<!-- <view class="">
				门店id：{{store_id||'门店id'}}
			</view>
			订单号：{{order_no||'订单号'}} -->
		</view>


		<!-- <image :src="qrcode" style="width: 300rpx; height: 300rpx;" mode="aspectFill"></image> -->
		<u-popup v-model="imgshow" mode="center" border-radius="14" @close="close" @open="open">
			<view
				style="width: 500rpx; height: 500rpx; display: flex; justify-content: center; align-items: center; flex-direction: column;">
				<text>请扫码付款~</text>
				<image :src="qrcode" style="width: 300rpx; height: 300rpx; margin-top: 40rpx;" mode="aspectFill">
				</image>
			</view>
		</u-popup>
		<u-empty text="暂无订单" v-if="!list" mode="list"></u-empty>
		<u-modal v-model="show" :show-cancel-button='true' @cancel="cancel" @confirm='confirm' :mask-close-able="true"
			:content="content"></u-modal>


	</view>
</template>

<script>
	import {
		login
	} from '../../api/login';
	import colorGradient from '../../uni_modules/vk-uview-ui/libs/function/colorGradient';
	import * as OrderApi from '@/api/order';
	import * as CashierApi from '@/api/cashier';
	import {
		Alipay,
		Wechat
	} from '@/core/payment';

	const App = getApp()

	export default {

		data() {
			return {

				// 页面元素
				list: {},
				store_id: '',
				imgshow: false,
				order_no: '',
				orderId: '',
				qrcode: "", //导出的二维码图片

			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(options, 'zzzzzzzzzzzzzzzzzzzzzzzzzzz');
			if (options.order_no) {
				let arr = options.order_no.split('aa')

				this.store_id = arr[1]
				this.order_no = arr[0]
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 加载页面数据
			setTimeout(() => {
				this.getOrderList()
			}, 500)
		},

		methods: {

			open() {
				console.log('open');
			},
			close() {
				this.imgshow = false
				// console.log('close');
			},

			pay(item) {
				this.orderId = item.order_id
				CashierApi.orderPay(item.order_id, {
						method: 'wechat',
						client: 'MP-WEIXIN',

					})
					.then(result => this.onSubmitCallback(result))
					.finally(err => setTimeout(() => this.disabled = false, 10))
			},

			onSubmitCallback(result) {
				this.imgshow = true
				this.qrcode = result.data.img_path

				console.log('结束了', this.imgshow);
				return
				Wechat.payment({
						orderKey: this.orderId,
						...paymentData
					})
					.then(res =>
						setTimeout(() => {
							this.getOrderList()
						}, 1000)
					)
					.catch(err => {
						console.log(err, 'zzz');
					})

			},

			async showpop(item) {

				await OrderApi.peisong({
					order_id: item.order_id
				}).then(res => {
					uni.openLocation({
						latitude: Number(item.latitude),
						longitude: Number(item.longitude),
						success: function() {
							console.log('success');
						},
						fail(e) {
							console.log(e, '我失败了');

						}
					});
				})

			},
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			// getPageData(callback) {
			// 	this.getOrderList()
			// 		.then(list => {
			// 			this.list = list
			// 		})
			// 		.catch()
			// },
			// 获取订单列表
			getOrderList() {
				const app = this
				return new Promise((resolve, reject) => {
					OrderApi.signorder({
							store_id: Number(this.store_id) || 3122001,
							order_no: this.order_no || '24062518123439857104',

						})
						.then(result => {
							this.list = result.data
							resolve(result.data)
						})
				})
			},



		},

		/**
		 * 分享当前页面
		 */
		// onShareAppMessage() {
		// 	const app = this
		// 	const {
		// 		page
		// 	} = app
		// 	return {
		// 		title: page.params.shareTitle,
		// 		path: "/pages/index/index?" + app.$getShareUrlParams()
		// 	}
		// },

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		// onShareTimeline() {
		// 	const app = this
		// 	const {
		// 		page
		// 	} = app
		// 	return {
		// 		title: page.params.shareTitle,
		// 		path: "/pages/index/index?" + app.$getShareUrlParams()
		// 	}
		// }

	}
</script>

<style lang="scss" scoped>
	.container_item {
		width: 686rpx;
		margin: 30rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;

		.container_item_top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.status {
				color: var(--main-bg);
			}
		}

		.goods-image {
			margin: 20rpx 0;
			display: flex;
			align-items: center;

			.goods-img {
				width: 124rpx;
				height: 124rpx;
				margin-right: 20rpx;
			}

			.goods-image-intro {

				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.goods-image-intro-top {
					width: calc(606rpx - 124rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.container_bottom {
			display: flex;
			margin: 40rpx 0;
			justify-content: space-between;
			align-items: center;

			.address {}

			.send {
				flex-shrink: 0;
				color: var(--main-bg);
				border: 1rpx solid var(--main-bg);
				padding: 10rpx 20rpx;
				border-radius: 15rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>